import {
  login,
  getUserInfo,
  getUserDetailById
} from '@/api/user'
import {
  setToken,
  getToken,
  removeToken,
  setTimeStamp
} from '@/utils/auth'

import { resetRouter } from '@/router'

const state = {
  // 储存 token
  token: getToken(),
  userInfo: {}
}
const mutations = {
  // 修改 token
  setToken(state, data) {
    state.token = data
    // 除了将 token 放入 state
    // 还需要数据持久化
    setToken(data)
  },
  // 清空 token
  removeToken(state) {
    state.token = ''
    // 记得一并清理 Cookies 避免刷新又回来
    removeToken()
  },
  // 设置用户数据
  setUserInfo(state, data) {
    // 为了避免数据的污染, 最好拷贝一份新的对象
    state.userInfo = { ...data }
  },
  // 清理用户数据
  removeUserInfo(state) {
    state.userInfo = {}
  }
}
const actions = {
  async login(store, data) {
    // 1. 等待请求发送
    const res = await login(data)
    console.log(res)
    // 2. 利用 mutations 储存 token
    // 因为在响应拦截已经将 res.data.data 结构
    // 这里面的res就是直接我们需要的数据
    // store.commit('setToken', res.data.data)
    store.commit('setToken', res)
    // 登录成功后记录时间戳
    setTimeStamp()
  },
  async getUserInfo(store) {
    const res = await getUserInfo()
    // 这里获取的数据不够, 少了头像
    // 就要从在这获取用户的详情
    const userDetail = await getUserDetailById(res.userId)

    const data = {
      ...res,
      ...userDetail
    }

    store.commit('setUserInfo', data)
  },
  logout(store) {
    store.commit('removeToken')
    store.commit('removeUserInfo')
    // 清理路由配置
    resetRouter()
    // 清理菜单
    // 默认带模块路径的语法, 是调用子模块 mutations 的方式
    // 但是 permission 跟 user 是兄弟模块
    // 如果要以子模块的方式触发, 只能是上一层的根模块才可以
    // 这里的调用可以加上第三个参数, 是一个配置对象
    // 里面用一个 root 属性,可以指定当前的调用基于跟模块
    store.commit('permission/setRoutes', [], { root: true })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
